<template>
  <div>
    <el-container>

      <el-aside width="200px">
        <el-menu router :default-openeds="['0']">
          <el-submenu v-for="(dir,i) in $router.options.routes" :index="i+''" :key="i" v-if="dir.show">
            <template slot="title"><i class="el-icon-menu"></i>{{dir.name}}</template>
            <el-menu-item v-for="(child, j) in dir.children"
                          :index="child.path"
                          :key="j"
                          :class="child.name == $route.name?'is-active':'' ">{{child.name}}</el-menu-item>
          </el-submenu>

          <el-submenu index="2">
            <template slot="title"><i class="el-icon-location"></i><span>导航2</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组A</template>
              <el-menu-item index="menu2-1">选项1</el-menu-item>
              <el-menu-item index="menu2-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组B">
              <el-menu-item index="menu2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="menu2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="menu2-4-1">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>

          <el-menu-item index="menu3">
            <i class="el-icon-menu"></i>
            <span slot="title">导航3</span>
          </el-menu-item>
          <el-menu-item index="menu4">
            <i class="el-icon-setting"></i>
            <span slot="title">导航4</span>
          </el-menu-item>
        </el-menu>


<!--        <el-menu :default-openeds="['0','1']" router>-->
<!--          <el-submenu v-for="(topMenuItem,idx) in $router.options.routes" v-if="topMenuItem.show" :index="idx+''">-->
<!--            <template slot="title"><i class="el-icon-setting"></i>{{ topMenuItem.name }}</template>-->
<!--            <el-menu-item v-for="(subMenuItem,j) in topMenuItem.children"-->
<!--                          :class="$route.path==subMenuItem.path?'is-active':'' "-->
<!--                          :index="subMenuItem.path">{{ subMenuItem.name }}-->
<!--            </el-menu-item>-->
<!--          </el-submenu>-->
<!--        </el-menu>-->
      </el-aside>

      <el-main>
        <router-view></router-view>
      </el-main>

    </el-container>
  </div>
</template>

<style lang="stylus" scoped>
@import '~styles/theme.styl'
@import '~styles/mixins.styl'
.el-header
  background-color: #B3C0D1
  color: #333
  line-height: 60px

#app
  .el-container
    height: 700px
    border: 3px solid #eee

    .el-aside
      background-color: $red
      color: $lightgreen

</style>

<script>
import 'path'
export default {
  data() {
    const item = {
      //date: '2016-05-02',
      name: '',
      //address: '上海市普陀区金沙江路 1518 弄'
    };
    return {
      tableData: Array(20).fill(item)
    }
  }
};
</script>